<!-- 这是首页的轮播图组件 -->
<template>
    <div class="banner">
        <el-carousel :interval="3000" indicator-position="none">
            <el-carousel-item v-for="item in urls" :key="item">
                <img :src="item" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
    import { getBannerUrl } from "@/tools/ajax"
    export default {
        name: "Banner",
        data() {
            return {
                urls: []
            }
        },
        mounted() {
            getBannerUrl().then(res => {
                console.log(res.data)
                this.urls = res.data
            })
        },

    }
</script>
<!-- 由于样式隔离的存在, 父组件中不能修改子组件样式,  解决方案
    1, 取消样式隔离, 使用全局样式修改, 但不建议,可能造成样式冲突
    2, 样式穿透 : 在样式隔离的前提下,修改子组件样式
        语法  父组件选择器>>>子组件选择器
-->
<style scoped>
    .banner {
        width: 1200px;
        height: 500px;
        margin: auto;
        border-radius: 20px;
        overflow: hidden;
    }

    .banner>>>.el-carousel {
        height: 500px;
    }

    .banner>>>.el-carousel__item {
        height: 500px;
    }

    img {
        width: 100%;
    }

    .banner>>>button {
        width: 50px;
        height: 50px;
        background-color: rgba(128, 0, 128, 0.463);
        font-size: 20px;
        color: black;
        top: 250px;
        transition: all 0.4s;
    }

    .banner>>>button:hover {
        color: white;
        background-color: rgba(128, 0, 128, 0.776);
    }
</style>